<template>
  <div class="recruit_box">
    <div class="recruit_head">
      <div class="head_logo">
        logo
      </div>
      <div class="head_title">
        结温检测综合系统
      </div>
      <div class="head_logout">
        <!-- 此处开发为点击后在当前界面弹出说明文档 -->
        <div class="head_img" @click="wenti">
          <img src="../../assets/imgs/bang.png" alt="" srcset="">
        </div>
        <div class="head_img" @click="denglu">
          <img src="../../assets/imgs/wude.png" alt="" srcset="">
        </div>
        <div class="head_img" @click="logout">
          <img src="../../assets/imgs/tuichu.png" alt="" srcset="">
        </div>
      </div>
    </div>

    <div class="recruit_title">
      <div class="jux_box">
        <div class="title_jux" @click="qehuan(1)">
          首页
        </div>
        <div class="title_jux" @click="qehuan(2)">
          参数设置
        </div>
        <div class="title_jux1" @click="qehuan(3)">
          历史数据
        </div>
      </div>
    </div>

    <!-- 首页 -->
    <div class="shouye" v-if="yemianqiehuan == 1">
      <div class="recruit_conte">
        <div class="conte_left">
          <div class="conte_upper">
            <div class="upper_annue">
              <el-button type="primary">IGBT 关断</el-button>
            </div>
            <div class="upper_annue1">
              <el-button type="primary">电源开启</el-button>
            </div>
            <div class="upper_annue1">
              <el-button type="primary">电源关断</el-button>
            </div>
            <div class="upper_annue1">
              <el-button type="primary">全段终止</el-button>
            </div>
          </div>

          <div class="conte_huxi">
            <div class="huxiyi_left">
              <div class="huxiyi_upleft">
                <div>值1：</div>
                <div>
                  {{ mood1 }}
                </div>
              </div>
              <div class="huxiyi_xialeft">
                <div>值2：</div>
                <div>{{ mood2 }}</div>
              </div>
            </div>
            <div class="conte"></div>
            <div class="huxiyi_right">
              <div class="huxiyi_upright">
                <div>值3：</div>
                <div>{{ mood3 }}</div>
              </div>
              <div class="huxiyi_xiaright">
                <div>值4：</div>
                <div>{{ mood3 }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="conte_right">
          <div class="conte_jux">
            <div class="jux_img">
              <div class="jux_yuan"></div>
              <div class="jux_text">电源</div>
            </div>
            <div class="jux_img1">
              <div class="jux_yuan"></div>
              <div class="jux_text">工作</div>
            </div>
            <div class="jux_img1">
              <div class="jux_yuan"></div>
              <div class="jux_text">空闲</div>
            </div>
            <div class="jux_img1">
              <div class="jux_yuan"></div>
              <div class="jux_text">过滤</div>
            </div>
            <div class="jux_img1">
              <div class="jux_yuan"></div>
              <div class="jux_text">15V欠压</div>
            </div>
            <div class="jux_img1">
              <div class="jux_yuan"></div>
              <div class="jux_text">5V欠压</div>
            </div>
          </div>
          <div class="kuang_box">
            <lineChart></lineChart>
          </div>
        </div>
      </div>
      <div class="conte_button">
        <div class="button_left">
          <div class="shuzi"></div>
          <div class="text_gundon">
            <current></current>
          </div>
        </div>
        <div class="button_right">
          <div class="fenlen_box">
            <div class="fenlen_img"></div>
            <div class="fenlen_text">风冷</div>
            <div class="huado">
              <el-slider v-model="value1"></el-slider>
            </div>
          </div>
          <div class="yelen_box">
            <div class="yelen_img"></div>
            <div class="fenlen_text">液冷</div>
            <div class="huado">
              <el-slider v-model="value2"></el-slider>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 参数设置 -->
    <div class="canshu" v-if="yemianqiehuan == 2">
      <settings></settings>
    </div>

    <!-- 历史数据 -->
    <div class="lishi" v-if="yemianqiehuan == 3">
      <historicalData></historicalData>
    </div>

    <!-- 系统操作说明弹框 -->
    <el-dialog
        title="系统操作说明"
        :visible.sync="bangzhuVisible"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="50%"

        :modal="false"
        :show-close="false">
      <!-- 此处开发请在代码处预留”正文“文本的输入位置 -->
      <div class="dialog_text">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </div>
      <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="zhifuClose">取 消</el-button> -->
            <el-button style="width: 10%; height: 30px;" type="primary" @click="logoutHandle">退 出</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
// 获取api请求
// import {} from '../../api/index'
import current from './current'
import settings from './settings'
import lineChart from './lineChart'
import historicalData from './historicalData'

export default {
  components: {
    current,
    lineChart,
    settings,
    historicalData
  },
  data () {
    return {
      yemianqiehuan: 1,
      bangzhuVisible: false,
      value1: '',
      value2: '',
      mood1: '',
      mood2: '',
      mood3: '',
      mood4: '',
      timer: null,
    }
  },
  mounted () {
    this.changeMood(100)
    this.timer = setInterval(() => {
      setTimeout(() => {
        this.changeMood(100.56)
      }, 0)
    }, 2000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    qehuan (val) {
      this.yemianqiehuan = val
    },
    logoutHandle () {
      this.$store.dispatch('logout').then(() => {
        location.href = '/login';
      })
      this.bangzhuVisible = false
    },
    wenti () {
      this.bangzhuVisible = true
    },
    changeMood (value) {
      this.mood1 = Math.floor(Math.random() * value)
      this.mood2 = Math.floor(Math.random() * value)
      this.mood3 = Math.floor(Math.random() * value)
      this.mood4 = Math.floor(Math.random() * value)
    },
    denglu () {
      this.$router.push('/login')
    },
    logout () {
      this.$router.push('/login')
    }
  },
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.recruit_box {
  padding: 30px;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
  overflow: hidden;
}

.recruit_head {
  height: 10%;
  display: flex;

  justify-content: space-between;
}

.head_logo {
  width: 20%;
  background-color: #2448FF;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: #fff;
  font-size: 50px;
}

.head_title {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 50px;
}

.head_logout {
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.head_img {
  padding: 0px 10px;
}

.recruit_title {
  margin-top: 1%;
  width: 100%;
  height: 6%;
  background-image: url('~@/assets/imgs/title.png');
  background-size: 100% 100%;
  overflow: hidden;
}

.jux_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.title_jux {
  width: 20%;
  height: 68%;
  background-image: url('~@/assets/imgs/juxin.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: #fff;
  font-size: 28px;
}

.title_jux1 {
  margin-right: 8%;
  width: 20%;
  height: 68%;
  background-image: url('~@/assets/imgs/juxin.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  color: #fff;
  font-size: 28px;
}

.shouye {
  width: 100%;
  height: 100%;
}

.canshu {
  width: 100%;
  height: 100%;
}

.lishi {
  width: 100%;
  height: 100%;
}

.recruit_conte {
  padding-top: 1.5%;
  display: flex;
  width: 100%;
  height: 60%;
  /* background: #2448FF; */
}

.conte_left {
  width: 50%;
  height: 100%;
}

.conte_right {
  display: flex;
  justify-content: space-between; /*左右对其*/
  width: 50%;
  height: 100%;
}

.conte_upper {
  display: flex;
  width: 100%;
  height: 12%;
}

.upper_annue {
  padding-top: 0.9%;
  color: #fff;
  font-size: 30px;
  width: 15%;
  height: 100%;
  /* background-image: url('~@/assets/imgs/annue.png');
  background-size: 100% 100%; */
  display: flex;
  justify-content: center; /* 水平居中 */
  font-size: 26px;

  ::v-deep .el-button {
    width: 100%;
    height: 100%;
  }
}

.upper_annue1 {
  padding-top: 0.9%;
  margin-left: 5%;
  width: 15%;
  height: 100%;

  ::v-deep .el-button {
    width: 100%;
    height: 100%;
  }

  /* background-image: url('~@/assets/imgs/annue.png');
  background-size: 100% 100%; */
  display: flex;
  justify-content: center; /* 水平居中 */
  color: #fff;
  font-size: 26px;
}

.conte_huxi {
  padding-top: 2%;
  width: 100%;
  height: 85%;
  display: flex;
  justify-content: space-between;
}

.huxiyi_left {
  width: 30%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between; /*左右对其*/
}

.huxiyi_right {
  width: 30%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between; /*左右对其*/
}

.huxiyi_upleft {
  width: 100%;
  height: 40%;
  background-image: url('~@/assets/imgs/conet_upleft.png');
  background-size: 100% 100%;
  font-size: 40px;
  color: #244BFF;
  display: flex;
  padding-right: 15%;
  justify-content: center; /* 水平居中 */
  padding-top: 15%;
}

.huxiyi_xialeft {
  display: flex;
  justify-content: center; /* 水平居中 */
  padding-top: 30%;
  padding-right: 15%;
  width: 100%;
  height: 40%;
  background-image: url('~@/assets/imgs/conet_xialeft.png');
  background-size: 100% 100%;
  font-size: 40px;
  color: #244BFF;
}

.huxiyi_upright {
  display: flex;
  justify-content: center; /* 水平居中 */
  padding-left: 15%;
  padding-top: 15%;
  width: 100%;
  height: 40%;
  background-image: url('~@/assets/imgs/conet_upright.png');
  background-size: 100% 100%;
  font-size: 40px;
  color: #244BFF;
}

.huxiyi_xiaright {
  display: flex;
  justify-content: center; /* 水平居中 */
  padding-left: 15%;
  padding-top: 30%;
  width: 100%;
  height: 40%;
  background-image: url('~@/assets/imgs/conet_xiaright.png');
  background-size: 100% 100%;
  font-size: 40px;
  color: #244BFF;
}

.conte {
  width: 39%;
  height: 80%;
  background-image: url('~@/assets/imgs/huxi.png');
  background-size: 100% 100%;
}

.conte_jux {
  padding-left: 5%;
  width: 22%;
  height: 100%;
}

.jux_img {
  padding: 0px 22%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /*左右对其*/
  width: 100%;
  height: 10%;
  background-image: url('~@/assets/imgs/juxinp.png');
  background-size: 100% 100%;
}

.jux_img1 {
  padding: 0px 22%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /*左右对其*/
  margin-top: 27%;
  width: 100%;
  height: 10%;
  background-image: url('~@/assets/imgs/juxinp.png');
  background-size: 100% 100%;
}

.jux_yuan {
  width: 20%;
  height: 30%;
  background-color: #F6FF00; /* 设置圆形的背景颜色 */
  border-radius: 50%;
}

.jux_text {
  color: #fff;
  font-size: 18px;
}

.kuang_box {
  padding: 5%;
  width: 75%;
  height: 100%;
  background-image: url('~@/assets/imgs/kung.png');
  background-size: 100% 100%;
}

.conte_button {
  width: 100%;
  height: 20%;
  padding-top: 1%;
  display: flex;
}

.button_left {
  display: flex;
  padding: 30px;
  width: 73%;
  height: 100%;
  background-image: url('~@/assets/imgs/daku.png');
  background-size: 100% 100%;
}

.button_right {
  padding: 30px;
  margin-left: 2%;
  width: 25%;
  height: 100%;
  background-image: url('~@/assets/imgs/xiaoku.png');
  background-size: 100% 100%;
}

.shuzi {
  width: 3%;
  height: 40%;
  background-image: url('~@/assets/imgs/zidoqinli.png');
  background-size: 100% 100%;
}

.text_gundon {
  padding-left: 2%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fenlen_box {
  width: 100%;
  height: 30%;
  display: flex;
  align-items: center; /* 垂直居中 */
}

.fenlen_img {
  width: 7%;
  height: 100%;
  background-image: url('~@/assets/imgs/fenlen.png');
  background-size: 100% 100%;
}

.yelen_box {
  width: 100%;
  height: 30%;
  display: flex;
  margin-top: 5%;
  align-items: center; /* 垂直居中 */
}

.yelen_img {
  width: 7%;
  height: 100%;
  background-image: url('~@/assets/imgs/yelen.png');
  background-size: 100% 100%;
}

.fenlen_text {
  margin-left: 3%;
  font-size: 20px;
  color: #244BFF;
  font-weight: bold;
}

.huado {
  margin-top: 1%;
  margin-left: 5%;
  width: 50%;
}

::v-deep .el-slider__bar {
  height: 20px;
}

::v-deep .el-slider__button {
  width: 20px;
  height: 20px;
  margin-top: 13px !important;
}

::v-deep .el-slider__runway {
  height: 20px;
  background: #4472c4;
}

::v-deep .el-dialog__header {
  text-align: center;
}

::v-deep .el-dialog {
  padding: 0px 30px;
  border-radius: 30px;
}

.dialog_text {
  width: 100%;
  padding: 5px;
  font-size: 24px;
  color: black;
  word-wrap: break-word;
  word-break: break-all;
  text-decoration: underline;
}
</style>
